<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>沂水旅游</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css">
    <link rel="stylesheet" href="/static/index/css/base.css">
</head>
<body>

<style>
    html{
        background: #ffffff;
    }
    *{
        margin: 0;
        padding: 0;
    }
    html, body{
        width: 100%;
        height: 100%;
    }

    .top{
        height: 85px;
        background: #000000;
    }

    .top_cen{
        width: 1170px;
        margin: 0 auto;
        height: 85px;
        align-items: center;
        display: flex;
    }

    .middle{
        height: 85%;
        background-image:url("/static/index/images/loginBg.png");
        background-repeat: no-repeat;
        background-size:100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .login-main{
        width: 355px;
        background: #ffffff;
        padding: 20px;
        padding-bottom: 10px;
    }

    .layui-tab-title{
        display: flex;
        justify-content: center;
    }

    .layui-tab-title li{
        width: 50%;
    }

    .form-box{

        padding-top: 20px;

    }

    .form-input{
        margin-bottom: 20px;
    }

    .form-button button{
        background: #20E6BA;
    }

    .forget-pwd{
        display: flex;
        justify-content:flex-end;
    }

    .forget-pwd a{
        color: #ADADAD;
    }

    .getIcode input{
        height: 36px;
        margin: 0;
        padding: 0;
        border:none;
        padding-left: 10px;
    }

    .getIcode{
        border: 1px solid #e6e6e6;
        border-radius: 2px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .getIcode a{

        margin-right: 10px;
        color: #2D9FFF;
    }
    button{
        background: #20E6BA;
    }

    .toButton{
        background:#20E6BA;
    }

    .bottom{
        height: 146px;
        color: #5C5C5C;

    }

    .bottom1{
        width: 500px;
        margin:0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100px;
    }

    .bt1{
        display: flex;
        align-items: center;
        height: 20px;
        font-size: 12px;
    }

    .bt1 img{
        margin-right: 5px;
    }

    .bottom2{
        width: 1170px;
        margin: 0 auto;
        border-top:1px solid #F0F0F0;
        height:45px;
        text-align: center;
        line-height: 45px;
        font-size: 12px;
        color: #5C5C5C;
    }

    .bt1_3{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100px;
    }
    .bt1_3 img{
        width: 40px;
        margin-right: 0;
        margin-bottom: 10px;
    }

    .getCodeButton{
        background: none;
        border: none;
        color: #2D9FFF;
        cursor: pointer;
        margin-right: 5px;
    }

    .btnDisabled{
        background: none;
        border: none;
        cursor: default;
        color: #999999;
    }



</style>

<div class="loginBox">

    <div class="top" style="back">
        <div class="top_cen">
            <img src="/static/index/images/logo.png" alt="">
        </div>
    </div>

    <div class="middle">
        <div class="login-main">
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <li class="layui-this">登录</li>
                    <li>注册</li>
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <form class="layui-form" action="">
                            <div class="form-box">

                                <div class="form-input">

                                    <input type="text" name="phone" lay-verify="required|phone" placeholder="手机号" autocomplete="off" class="layui-input">

                                </div>

                                <div class="form-input">

                                    <input type="password" name="pwd" lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input">

                                </div>

                                <div class="form-input">

                                    <button lay-submit lay-filter="login" class="toButton layui-btn layui-btn-fluid">登录</button>

                                </div>

                                <div class="forget-pwd">

                                    <a href="/">忘记密码？</a>

                                </div>

                            </div>
                        </form>

                    </div>

                    <div class="layui-tab-item">

                        <form class="layui-form" action="">
                            <div class="form-box">

                                <div class="form-input">

                                    <input type="text" name="nickname" lay-verify="required" id="nickname" placeholder="请为自己取一个昵称" autocomplete="off" class="layui-input">

                                </div>

                                <div class="form-input">

                                    <input type="text" name="phone" lay-verify="required|phone" id="regphone" placeholder="请输入您的手机号" autocomplete="off" class="layui-input">

                                </div>

                                <div class="form-input">

                                    <div class="getIcode">
                                        <input type="text" name="icode" lay-verify="required" placeholder="手机验证码" autocomplete="off">
                                        <button type="button" class="getCodeButton" id="getCode" data-type="getCode">获取短信验证码</button>

                                    </div>

                                </div>

                                <div class="form-input">

                                    <input type="password" name="password" lay-verify="required" placeholder="6-12位登录密码" autocomplete="off" class="layui-input">

                                </div>

                                <div class="form-input">

                                    <input type="password" name="password2" lay-verify="required" placeholder="再次确认密码" autocomplete="off" class="layui-input">

                                </div>

                                <div class="form-input">

                                    <button lay-submit lay-filter="register" class="toButton layui-btn layui-btn-fluid">立即注册</button>

                                </div>

                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="bottom">
        <div class="bottom1">
            <div class="bt1 bt1_1">
                <img src="/static/index/images/bottom_tel.png" alt="">
                电话：18654121449
            </div>
            <div class="bt1 bt1_2">
                <img src="/static/index/images/bottom_email.png" alt="">
                邮箱：lygalawng@163.com
            </div>
            <div class="bt1 bt1_3">
                <img src="/static/index/images/app_qrcode.png" alt="">
                扫码下载沂水旅游APP
            </div>
        </div>
        <div class="bottom2">
            版权所有 © 山东蓝丞传媒文化有限公司旗下《沂水旅游》 鲁ICP备1354555号-1
        </div>
    </div>


</div>

<script src="/static/layuiadmin/layui/layui.js"></script>
<script>
    layui.use(['element','form'], function () {
        var $ = layui.jquery;
        var layer = layui.layer
            ,form = layui.form
            ,element = layui.element;


        form.on('submit(login)', function(data){

            var loading = layer.load(1, {
                shade: [0.1,'#fff'] //0.1透明度的白色背景
            });

            $.ajax({
                url: "{:url('login/login')}",
                type: 'post',
                dataType: 'json',
                data: {data:data.field},
                success: function(info){
                    layer.closeAll();
                    if (info.code == "0") {
                        layer.msg('登录成功',{icon:1,time:1000},function(){
                            window.location.href = "{:url('Index/index')}";
                        });

                    }else{
                        layer.msg(info.code,{icon:2,time:1000},function(){
                            $('#captcha_img').attr('src','{:captcha_src()}?'+Math.random());
                        });
                    }
                }
            });

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        form.on('submit(register)', function(data){

            if (data.field.password != data.field.password2){
                layer.msg('两次输入的密码不同',{icon:2,time:1000},function(){
                    return false;
                });
                return false;
            }

            var loading = layer.load(1, {
                shade: [0.1,'#fff'] //0.1透明度的白色背景
            });

            $.ajax({
                url: "{:url('login/register')}",
                type: 'post',
                dataType: 'json',
                data: {data:data.field},
                success: function(info){
                    layer.closeAll();
                    if (info.code == "0") {
                        layer.msg('注册成功',{icon:1,time:1000},function(){
                            window.location.href = "{:url('Index/index')}";
                        });

                    }else{
                        layer.msg(info.msg,{icon:2,time:1000},function(){
                            $('#captcha_img').attr('src','{:captcha_src()}?'+Math.random());
                        });
                    }
                }
            });

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        var windowHeight = $(window).height();

        var needHeight = windowHeight*1-232;

        $('.middle').css('height',needHeight+'px');

        $('#getCode').click(function(){

           var regphone = $('#regphone').val();

            if (regphone == ''){
                layer.msg('请输入手机号',{time:1000});
                return false;
            }

           var MOBILE_REG = /^1\d{10}$/;
            if (MOBILE_REG.test(regphone)) {
                $.ajax({
                    url: "{:url('Login/getIcode')}",
                    type: 'post',
                    dataType: 'json',
                    data: {regphone:regphone},
                    success: function(data){
                        if (data.code == 0){
                            layer.msg('已发送',{time:1500});
                            settime();
                        }else{
                            layer.msg(data.code,{time:1500});
                        }
                    }
                });

            }else{
                layer.msg('手机号格式错误',{time:1000});
            }
        });

        var countdown = 30;
        function settime() {
            var btn = $('#getCode');
            if (countdown == 0) {
                btn.html("获取验证码");
                btn.removeClass("btnDisabled");
                btn.attr("disabled", false);
                countdown = 30;
                return;
            } else {
                btn.addClass("btnDisabled");
                btn.attr("disabled", true);
                btn.html("重新发送(" + countdown + ")");
                countdown--;
            }
            setTimeout(settime, 1000);
        }

    });
</script>
</body>
</html>